.dux-table-layout {
  background: #fdfdfd;
  padding: 15px;
}

.dux-table {
  background-color: #fff;
  border: 1px solid #eee;
  p {
    margin: 0;
    padding: 0;
    color: #999;
  }
  th,td {
    vertical-align: middle;
  }
}

.dux-table > tbody > tr > td, .dux-table > tfoot > tr > td, .dux-table > thead > tr > td {
  border-top: 1px solid #eee;
  padding: 10px 10px;
  vertical-align: middle;
}

.dux-table > thead > tr > th {
  border-top: none;
  border-bottom: none;
  background: #eee;
  padding: 15px 10px;
  font-size: 1.4rem;
}

.dux-table > tr:hover, .dux-table tbody tr:hover {
  background: #f6f6f6 !important;
}

.dux-print-table {
  bottom: 0;
  width: 100%;
  border-collapse:collapse;
  border-spacing:0;
  th,td {
    border: 1px solid #ccc;
  }
}

.dux-layout-main {
  .dux-form {
    padding-top: 0;
  }
}

.dux-user-show {
  padding: 15px;
}

.dux-user-box {
  display: flex;
  width: 400px;
  .user-avatar {
    img {
      width: 70px;
      height: 70px;
    }
  }
  .user-info {
    flex: 1;
    padding-left: 10px;
    .user-data {
      padding: 2px 0;
      font-size: 1.4rem;
      .user-id {
        color: #999;
      }
      .user-name {

      }
      .user-tel {
        color: #999;
      }
      .user-email {
        color: #999;
      }
    }
    .user-desc {
      padding: 2px 0;
      .role-name {
      }
      .grade-name {
      }

    }
    .user-reg {
      padding-top: 2px;
      color: #999;
    }
  }
}

.dux-attach-box {
  padding: 5px;
  width: 100%;
  height: 400px;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  overflow: hidden;
  .attach-item {
    width: 118px;
    text-align: center;
    padding: 5px;
    height: 130px;
    cursor: pointer;
    &.active {
      .item-image {
        border-color: #0f7ae5;
      }
    }
    .item-image {
      overflow: hidden;
      border: 1px solid #ddd;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      padding: 3px;
      img {
        display: block;
        max-width: 100%;
        max-height: 100%;
      }
    }
    .item-title {
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
  }
}

.dux-spec-group {
  input[type=text] {
    min-width: 60px;
    max-width: 100px;
  }

  .spec-list {
    display: flex;
    flex-wrap: wrap;
    .list-item {
      display: block;
      padding: 5px;
    }
    .list-add {
      padding: 5px;
    }

    @media screen and (max-width: 641px) {

      .list-add,
      .list-item {
        width: auto;
      }

    }

  }
}